<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- <p>刷新次数: {{ count }}</p> -->
    
    <van-list class="boxxx" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="searchbox">
        <div class="inputbox">
          <img
            style="width:15px;height:16px;margin:0 10px 0 18px"
            src="../../assets/img/sousuo.png"
            alt
          />
          <input @click="search" type="text" placeholder="搜索您想要的药品" />
        </div>
        <p class="sousuo" @click="search">搜索</p>
      </div>
      <!-- 轮播图   跳转页面 -->
      <div class="banner">
        <van-swipe :autoplay="3000" :show-indicators="false">
          <van-swipe-item @click="tiaozhuan(item.url)" v-for="(item,index) in banners" :key="index">
            <img class="bannerimg" :src="item.src" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="section">
        <div class="item" @click="jump(1)">
          <img src="../../assets/img/section1.png" alt />
          <div class="title">药品预定</div>
        </div>
        <div class="item" @click="jump(3)">
          <img src="../../assets/img/section5.png" alt />
          <div class="title">代购服务</div>
        </div>
        <div class="item" @click="jump(2)">
          <img src="../../assets/img/section2.png" alt />
          <div class="title">疾病查询</div>
        </div>
        
        <div class="item" @click="jump(4)">
          <img src="../../assets/img/section3.png" alt />
          <div class="title">健康常识</div>
        </div>
        <div class="item" @click="jump(5)">
          <img src="../../assets/img/section4.png" alt />
          <div class="title">分店分布</div>
        </div>
      </div>
      <div class="section1">
        <div style="width:100%;height:1px;"></div>
        <div class="box11">
          <div class="shiyong">
            <p>活动公告</p>
            <p class="gengduo" @click="tolist">查看更多</p>
          </div>
          <div class="itemnr">
            <div class="item" @click="tolist" v-for="(item,index) in shiyong" :key="index">
              <div class="title1">{{item.goods_name}}</div>
              <div class="title2">所需积分：{{item.exchange_integral}}</div>
              <div class="imgbox">
                <img :src="item.goods_img" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section2">
        <div style="width:100%;height:1px;"></div>
        <div class="box11">
          <div class="shiyong">
            <p>品牌专区</p>
            <p class="gengduo" @click="gopinpai">查看更多</p>
          </div>
          <div class="itemnr">
            <div
              class="item"
              @click="gopinpaidetails(item.brand_id)"
              v-for="(item,index) in zhuanqu"
              :key="index"
            >
              <img :src="item.brand_logo" />
              <p>{{item.brand_name}}</p>
            </div>
          </div>
          <div class="cnxh">
            <i></i>
            <p>
              <img src alt />
              猜你喜欢
            </p>
            <i></i>
          </div>
        </div>
      </div>
      <div class="like">
        
        <ul>
          <li @click="todetails(item.goods_id)" v-for="(item,index) in yaopin" :key="index">
            <img :src="item.goods_thumb" />
            <p class="p1">{{item.goods_name}}</p>
            <div class="qian">
              <p class="p3">
                <span>￥</span>
                {{item.shop_price}}
              </p>
              <p class="p4">提交需求</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- <div style='width:100%;height:49px;'></div> -->
    </van-list>
    </van-pull-refresh>
    <div class="footer">
      <Footer v-bind:select="select" @activeindex="childerfn"></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "../footer";
export default {
  data() {
    return {
      // 下拉刷新
      isLoading:false,
      select: 1,
      banners: "",
      shiyong: [],
      zhuanqu: [],
      yaopin: [],
      // 分页
      loading: false,
      finished: false,
      page: 1
    };
  },
  components: {
    Footer
  },
  created() {
    var url = window.location.href;
    // console.log(url,'url')
    // this.$getcode()

    // var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
    // this.$get(url).then(res => {
    //     console.log(res)
    // })
    //  location.href =
    //       'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx643e8bfbf22404b3&redirect_uri=' +
    //       encodeURIComponent(url) + '&response_type=code&scope=snsapi_userinfo&state=STATE%23wechat_redirect&connect_redirect=1#wechat_redirect'
    this.getbanner();
    this.jingxuan();
    this.pinpai();
    this.getlist(1);
  },
  mounted() {
    // this.getbanner()
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.getbanner();
        this.jingxuan();
        this.pinpai();
        this.getlist(1);
        this.isLoading = false;
      }, 1000);
    },
    // 轮播图
    getbanner() {
      // this.$axios({
      //     method: "get",
      //     url: "/api/gzh_index.php?action=banner_list",
      // })
      // .then(response => {
      //    this.banners = res.data
      // })
      this.$get("/api/gzh_index.php?action=banner_list", {})
        .then(res => {
          this.banners = res.data;
        })
        .catch(err => {});
    },
    tiaozhuan(url) {
      // this.$router.push('/home')
      window.location.href = url;
    },
    // 精选试用
    jingxuan() {
      this.$get("api/gzh_order.php?action=exchange_list", {
        min: 0,
        page: 1,
        limit: 4
      })
        .then(res => {
          this.shiyong = res.data;
        })
        .catch(err => {});
    },
    // 品牌专区
    pinpai() {
      this.$get("api/gzh_index.php?action=brand_list", {
        cid: "",
        page: 1,
        limit: 6
      })
        .then(res => {
          this.zhuanqu = res.data;
          console.log(this.zhuanqu);
        })
        .catch(err => {});
    },
    onLoad() {
      setTimeout(() => {
        this.page += 1;
        this.getlist(this.page);
      }, 500);
    },
    // 获取药品
    getlist(page) {

      console.log(localStorage.getItem("uid"), "uidaaaaaa");
      console.log(localStorage.getItem("pid"), "pid");

      this.$get("api/gzh_index.php?action=goods_list", {
        sort: "goods_number",
        order: "DESC",
        page: page,
        limit: 20,
        uid:
          localStorage.getItem("uid") != null ? localStorage.getItem("uid") : ""
      })
        .then(res => {
          console.log(this.yaopin, "yaopin");
          this.loading = false;
          if (page == 1) {
            if (res.data.length == 0) {
              this.finished = true;
            } else {
              this.yaopin = res.data;
            }
            if (res.data.length > 0 && res.data.length < 20) {
              this.finished = true;
            }
          } else {
            if (res.data.length == 0) {
              this.finished = true;
            } else {
              for (const key in res.data) {
                this.yaopin.push(res.data[key]);
              }
            }
            if (res.data.length > 0 && res.data.length < 20) {
              this.finished = true;
            }
          }
        })
        .catch(err => {});
    },
    // 底部筛选
    childerfn(index) {
      this.select = index;
    },
    jump(index) {
      if (index == 1) {
        this.$router.push({ path: "/look-medicine" });
      }
      if (index == 2) {
        this.$router.push({ path: "/disease-query" });
      }
      if (index == 3) {
        this.$router.push({ path: "/daigoufuwu" });
      }
      if (index == 4) {
        this.$router.push({ path: "/health-tips" });
      }
      if (index == 5) {
        this.$router.push({ path: "/fendian" });
      }
    },
    // 跳转免费试用list
    tolist() {
      this.$router.push({ path: "/free-trial" });
    },
    // 跳转品牌专区list
    gopinpai() {
      this.$router.push({ path: "/brand-street" });
    },
    // 品牌详情
    gopinpaidetails(id) {
      var uid = localStorage.getItem("uid");
      if (!uid) {
        // console.log(window.location.href)
        console.log(this.$route.name)
        this.$router.replace({
          name: "login",
          params: { beforeurl: this.$route.name }
        });
      } else {
        console.log("已经登录");
        this.$router.push({
          name: "brand-street-details",
          query: { brand_id: id }
        });
      }
    },
    todetails(id) {
      var uid = localStorage.getItem("uid");
      if (!uid) {
        // console.log(window.location.href)
        console.log(this.$route.name)
        this.$router.replace({
          name: "login",
          params: { beforeurl: this.$route.name }
        });
      } else {
        console.log("已经登录");
        this.$router.push({ path: "/details", query: { goods_id: id } });
      }
    },
    // 搜索
    search() {
      this.$router.push({ path: "/search" });
    }
  }
};
</script>

<style scoped>
.boxxx{
  overflow: hidden;
  overflow-y: scroll;
  height: 100vh;
}
.list__finished-text{
  margin-bottom:98px;
}


.nothing{
  color: #969799;
  font-size: 0.186667rem;
  line-height: 0.666667rem;
  text-align: center;
}
/* .likebox {
  height: 1;
} */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.searchbox {
  width: 100%;
  height: 100px;
  background: rgba(6, 162, 85, 1);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.searchbox .inputbox {
  width: 612px;
  height: 56px;
  background: rgba(255, 255, 255, 1);
  border-radius: 28px;
  display: flex;
  align-items: center;
}
.searchbox .inputbox input {
  font-size: 26px;
  border: none;
  width: 80%;
}
.sousuo {
  font-size: 30px;
  color: #fff;
}
.banner {
  width: 100%;
  height: 331px;
  background: #999;
}
.bannerimg {
  width: 100%;
  height: 100%;
}
.section {
  width: 100%;
  height: 213px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
}
.section .item {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.section .item .title {
  margin-top: 11px;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}
.section .item img {
  width: 100px;
  height: 100px;
}
.section1 {
  width: 100%;
  min-height: 262px;
  background: #efefef;
}
.box11 {
  width: 712px;
  margin: 18px auto 0;
  border-radius: 20px;
  overflow: hidden;
}
.shiyong {
  /* width: 712px;
  height: 617px; */
  background-color: #fff;
}

input {
  background: none;
  outline: none;
  border: none;
}
input:focus {
  border: none;
}
.shiyong {
  width: 100%;
  height: 92px;
  font-size: 32px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 162, 85, 1);
  color: #fff;
}
.gengduo {
  font-size: 26px;
}
.section1 .itemnr {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.section1 .itemnr .item {
  width: 50%;
  height: 262px;
  border: 1px solid #f4f4f4;
  box-sizing: border-box;
}
.section1 .item .title1 {
  font-size: 34px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  /* line-height: 30px; */
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 20px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section1 .item .title2 {
  margin-top: 20px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
  text-indent: 20px;
}
.section1 .item .imgbox {
  width: 190px;
  height: 125px;
  margin-top: 10px;
  margin-left: 151px;
  background-color: #999;
}
.section1 .item .imgbox img {
  width: 190px;
  height: 125px;
  text-align: end;
  background-color: #999;
}

.cnxh {
  width: 456px;
  height: 70px;
  display: flex;
  padding: 10px;
  align-items: center;
  margin: 0 auto;
}
.cnxh i {
  height: 1px;
  background: rgba(6, 162, 85, 1);
  flex-grow: 1;
}
.cnxh p {
  padding: 10px;
  font-size: 28px;
  color: rgba(6, 162, 85, 1);
}
.section2 {
  width: 100%;
  min-height: 500px;
  background: #efefef;
}
.section2 .itemnr {
  width: 100%;
  height: 450px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.section2 .item {
  width: 33.33%;
  text-align: center;
  margin-top: 10px;
}
.section2 .item img {
  width: 216px;
  height: 126px;
  border: 1px solid #f7f7f7;
}
.section2 .item p {
  font-size: 30px;
  color: #333;
}
/* 猜你喜欢 */
.like {
  width: 100%;
  /* height: 100%; */
  margin-bottom: 98px;
}
ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
ul li {
  width: 375px;
  height: 540px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
li img {
  width: 337px;
  height: 337px;
}
li .p1 {
  font-size: 34px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
li .p2 {
  font-size: 28px;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}
li .qian {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
li .qian .p3 {
  font-size: 34px;
  color: #c94451;
}
li .qian .p3 span {
  font-size: 28px;
}
li .qian .p4 {
  width: 132px;
  height: 55px;
  background: #06a255;
  font-size: 28px;
  color: #fff;
  text-align: center;
  line-height: 55px;
  border-radius: 28px;
}
</style>
<style>
.van-swipe {
  height: 100%;
}
.van-list {
  height: 100vh;
}
.van-list__finished-text{
  margin-bottom:98px!important;
}
</style>